<template>
    <div @longpress="showSameSounds" @click="handlePressed">
        <div v-if="type==='white'">
            <text style="font-size: 40px;font-weight: 900;text-align: center;"  :style="styles.whiteKey">{{musicName}}</text>
        </div>
        <div v-if="type==='black'">
            <text style="font-size: 40px;font-weight: 900;color:white;text-align: center;" :style="styles.key">{{musicName}}</text>
        </div>
        <wxc-popover ref="sameSoundsPopover"
                     :buttons="sameSounds"
                     :position=" {x: offsetLeft, y: styles.pop.y}",
                     @wxcPopoverButtonClicked="handleSameSoundChoose"
                     :arrowPosition="{pos: 'bottom'}"></wxc-popover>
    </div>

</template>

<script>
    // 钢琴键
    import {getMusicFlagByMusicNameYValue, getMusicFlagByXYValue, getSameSoundKey} from "../../../util/compute";
    import {getDeviceHeight, getFormatHeightPX, toast} from "../../../util/common";
    import {WxcMinibar, WxcPopover} from 'weex-ui';

    export default {
        name: "piano-key",
        components:{WxcPopover,WxcMinibar},
        props: {
            type: {
                type: String,
                default: 'white'
            },
            offsetLeft: {
                type:Number,
                default:300
            },
            xValue: {
                type: String,
                default: '60'
            },
            yValue: {
                type: String,
                default: '60'
            }
        },
        data() {
            return {styles:{
                pop:{y:getFormatHeightPX(-200)},
                    whiteKey:{'padding-top':getDeviceHeight(0.15),'font-size':getDeviceHeight(0.025)},
                key:{'padding-top':getFormatHeightPX(85),height:getDeviceHeight(0.13),'font-size':getDeviceHeight(0.025)}},musicName: '',info:{},sameSounds:[]}
        },
        mounted() {
            this.info = getMusicFlagByMusicNameYValue(this.xValue, this.yValue);
            this.musicName = this.info.name;
        },
        watch:{
            xValue(newVal){
             this.info = getMusicFlagByMusicNameYValue(newVal,this.yValue);
                this.musicName =this.info.name;
            } ,    yValue(newVal){
                this.info =  getMusicFlagByMusicNameYValue(this.xValue,newVal);
                this.musicName =this.info.name;
            }
        },
        methods:{
            handleSameSoundChoose({index}){
                this.$emit('pressed',this.sameSounds[index].value)
            },
            //显示所有等音列表
            showSameSounds(){
                this.sameSounds = getSameSoundKey(getMusicFlagByXYValue(this.info.xValue,this.info.yValue)).map(item=>{return {text:item.name,value:item}});
                this.$refs['sameSoundsPopover'].wxcPopoverShow();
            },
            handlePressed(){
                this.$emit('pressed',this.info)
            }
        }
    }
</script>

<style scoped>
</style>
